<template>
    <div id="Award_Method_Wrapper">
        <div style="overflow: auto; height: 75vh; margin-bottom: 0px">
            <div id="Award_Method" v-for="(item, index) in itemcount" :key="index">
                <div style="display: flex; justify-content: space-between; padding-right: 10px; box-sizing: border-box">
                    <p>抽奖限制</p>
                    <div style="display: inline-block">
                        <span
                            style="
                                font-size: 18px;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                line-height: 20px;
                                border-radius: 5px;
                                text-align: center;
                                cursor: pointer;
                                background: #409eff;
                                color: #fff;
                            "
                            @click="handleDecrease"
                            >-</span
                        >
                        <span
                            style="
                                font-size: 18px;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                line-height: 20px;
                                border-radius: 5px;
                                text-align: center;
                                cursor: pointer;
                                background: #409eff;
                                color: #fff;
                                margin-left: 10px;
                            "
                            @click="handleIncrease"
                            >+</span
                        >
                    </div>
                </div>
                <hr style="border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.1); margin: 10px 0 10px" />
                <Form />
            </div>
        </div>
    </div>
</template>
<script>
  export default {
      data() {
          return {
              itemcount: 1
              // form: {}
          };
      },
      components: {
          Form: () => import('./AwardMethod/Form.vue')
      },
      methods: {
          handleDecrease() {
              this.itemcount -= 1;
              if (this.itemcount < 1) {
                  // this.$confirm('确定要删除吗？', '提示', {
                  // 	type: 'warning'
                  // })
                  // 	.then(() => {
                  // 		this.itemcount -= 1;
                  // 	})
                  // 	.catch(() => {
                  // 		this.itemcount = 1;
                  // 	});

                  this.itemcount = 1;
              }
          },
          handleIncrease() {
              this.itemcount += 1;
          }
      }
      // watch: {
      //     $route: {
      //         deep: true,
      //         immediate: true,
      //         handler: function (a, b) {
      //             console.log(a, b);
      //         }
      //     }
      // }
  };
</script>
<style lang='scss'>
  #Award_Method_Wrapper {
      /* 定义滚动条样式 */
      ::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: rgba(0, 0, 0, 0.1);
      }

      /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-track {
          box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.15);
          border-radius: 10px;
          background-color: rgba(0, 0, 0, 0.15);
      }

      /*定义滑块 内阴影+圆角*/
      ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.15);
          background-color: rgba(0, 0, 0, 0.15);
      }
      // ======================================================================
  }
</style>